[CSS] 공통선택자 *(Asterisk) 알아보기 그리고 활용방법

CSS 선택자에 대하여 알아봅니다. CSS의 선택자는 아래와 같이 4가지로 크게 나뉩니다.

• 공통선택자
• 타입선택자
• 아이디선택자
• 클래스선택자

여기서 제일 상위의 선택자가 바로 오늘 알아볼 공통 선택자입니다. 공통선택자는 무슨 역할을 할까요?

# CSS 공통 선택자가 하는 일

공통 선택자는 다른 선택자와 조금 다릅니다. 일반적으로 선택자가 요소를 선택하여 필터링 하기 위함이라면 공통선택자는 모든 요소 및 그 하위 요소를 선택하여 스타일 지정하는 것이 목적입니다.

즉, 공통선택자에 의하여 해당하는 모든 요소에 스타일 지정을 가능하게 합니다.

아래처럼 일부 요소를 선택하고 그 하위의 모든 요소를 선택할 수도 있습니다.


위 css는 ul li 아래에 위치하는 모든 자손 요소를 선택합니다.

! 공통선택자가 언제 필요한가?

사실 공통선택자는 모든 하위의 요소들에게 똑같은 속성을 부여하므로 왜 필요할까라는 생각을 하게합니다. 하지만 공통 선택자 역시 많이 사용되며 특히 reset.css 처럼 페이지 전체에 공통으로 사용되야 할 엘리먼트에 적용합니다.

하지만 반대로 단점도 있습니다. 전체가 모두 선택되므로 뒤에 자바스크립트 등으로 추가되는 요소는 물론 의도하지 않은 태그 요소들도 함께 변경될 수 있죠. 이 경우 번거롭게 반대로 스타일을 제거하기 위한 코드가 부여해야 할 수도 있습니다. 또한 아무래도 공통선택자의 Rendering 시간이 상대적으로 길 수 있어 사용 이전에 꼭 * 공통 선택자를 사용해야 할 지 명확히해야합니다.